iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

在JS的世界碰碰撞撞乒乒乓乓!30天一起玩Matter.js!系列 第 3

Day3. 從Example Code瞧瞧Matter.js的盤古開天

  • 分享至 

  • xImage
  •  

說好今天要來談談昨天的那段扣裡,究竟寫了些什麼。

為什麼可以像傑克一樣神奇,產生出這樣的畫面呢?

我們今天會一段一段,用概略的方式帶大家看過這段扣,最後會分析一下我們的需求。

第一段這邊可以看到 Matter 後面帶出各種模組,Matter 是 Matter.js 中最高層級的namespace,這段的目的是要把各個模組引入定義成變數,取成貼近功能的名字,方便後面呼叫。

var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

第二段操控我們剛剛匯入的模組做了一些基本的Setup,Engine是整個 Matter.js 世界中的主宰,控制整個世界的模擬與更新,Render負責將Engine運算的結果以Canvas顯示出來,也提供一些繪製相關的方法。這樣我們建立了邏輯處理與顯示的相關模組。

// create an engine
var engine = Engine.create();

// create a renderer
var render = Render.create({
    element: document.body,
    engine: engine
});

第三段Rectangle這個詞看起來應該有些親切,沒錯,這段就是在創建方形,基本上就是帶入位置、大小參數,以及以一些設置可選選項(如isStatic)等等,就是昨天範例扣看到的三個方形(地板也是一個方形)。

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

第四段的Composite是一個組合的動作,把我們上面宣告的方形加入 engine.world ,也就是engine中的世界,Render.run會決定持續更新並渲染我們Canvas的幀數,Runner會負責持續更新engine中邏輯的相關資訊。最後用Runner.run把上面的設置整個跑起來,造就了我們昨天看到的三個方形的畫面。

// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);

// run the renderer
Render.run(render);

// create runner
var runner = Runner.create();

// run the engine
Runner.run(runner, engine);

好的,分析完我們昨天的範例程式碼,是不是開始稍微有點了解 Matter.js 了呢?

關於各個模組如果比較重要的,我們後面都會再提到,今天只是大概帶大家一起走過一次邏輯,知道他簡略的流程。

那在今天的最後,我們來看一下我們這次預計用 Matter.js 做的目標:彈珠台
https://ithelp.ithome.com.tw/upload/images/20210918/20142057Za8bQk7g7c.png
Youtube影片集錦版本

好的,這是《彈射世界》(手遊)的抽卡影片,會是一顆球從上面掉落,途中碰到方釘會做碰撞彈跳,碰到金光本來的白球會變金色的球,金色的球會變成彩球,任何顏色的球碰到彩球就會變成彩球。

玩家一般的希望是掉落到底部前要變成彩色的,代表抽到高稀有度的卡。

先把手遊放一旁,我們來分析一下這個功能如果要實踐的話會需要做哪些事情?

  • 建立方釘和顏色釘
  • 方釘和顏色釘會是固定的
  • 建立圓球
  • 圓球需要自由落體,受到重力影響
  • 圓球要能和方釘碰撞產生彈跳
  • 圓球和顏色釘碰撞的時候要偵測到碰撞並變色
  • 鏡頭移動,上帶到下
  • 在開始前,畫面要是靜止的,直到我們發出Signal
  • 滑鼠和球體互動 (追加功能)

在後面的日子裡,我們會以這個功能清單來一一配著 Matter.js 的文件庫來學習,畢竟有用就有用,有目的的學習,對學習效率可大有助益>_0
如果對於這個題目,你有什麼想法也歡迎下面回覆讓我們來看看能不能為我們的30之旅加點料。


上一篇
Day2. Hello Matter.js World!
下一篇
Day4. 其實一切東西都在那,只是少了渲染 - Render
系列文
在JS的世界碰碰撞撞乒乒乓乓!30天一起玩Matter.js!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言